<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="6">
        <el-input placeholder="请输入员工姓名" clearable v-model="queryForm.query"></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="doSearch">搜索</el-button>
      <el-button type="primary" @click="addEmp">添加员工</el-button>
    </el-row>
    <el-table :data="tabledData" border style="width: 100%">
      <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          v-for="(item, index) in options" :key="index">
        <template #default v-if="item.prop === 'action'">
          <el-button type="primary" size="small" :icon="Edit" @click="editEmp"></el-button>
          <el-button type="danger" size="small" :icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-sizes="[5, 10, 15]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="padding-top: 10px" />
  </el-card>


  <el-dialog
    v-model="dialog.show"
    :title="dialog.title"
    width="30%"
    :before-close="handleClose"
    :modal="true"
  >
    <el-form
      :model="empForm"
      label-width="120px"
      style="padding-right: 100px">
      <el-form-item label="编号" prop="empno" :required="true">
        <el-input v-model="empForm.empno" />
      </el-form-item>
      <el-form-item label="姓名" prop="ename">
        <el-input v-model="empForm.ename" />
      </el-form-item>
      <el-form-item label="职位" prop="job">
        <el-input v-model="empForm.job" />
      </el-form-item>
      <el-form-item label="上级员工编号" prop="mgr">
        <el-input v-model="empForm.mgr" />
      </el-form-item>
      <el-form-item label="入职日期" prop="hiredate">
        <el-date-picker
          v-model="empForm.hiredate"
          type="date"
          placeholder="请选择日期"
          style="width: 100%"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="薪资" prop="sal">
        <el-input v-model="empForm.sal" />
      </el-form-item>
      <el-form-item label="奖金" prop="comm">
        <el-input v-model="empForm.comm" />
      </el-form-item>
      <el-form-item label="部门编号" prop="deptno">
        <el-input v-model="empForm.deptno" />
      </el-form-item>
    </el-form>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog.show = false">取消</el-button>
        <el-button type="primary" @click="doSubmit">确定</el-button
        >
      </span>
    </template>
  </el-dialog>



</template>

<script setup>
	import {listEmp, saveEmp} from "./api/Emp";
	import {ref, reactive} from 'vue';
	import {options} from "./options";
	import {Edit, Delete, Search} from '@element-plus/icons-vue';

	// 搜索框
	const queryForm = reactive({
    query: '',
    pageNum: 1,
    pageSize: 5
  });

	// 对于数组类型要实现响应式最好使用ref来定义
	const tabledData = ref([]);
  const total = ref(0);

	const initEmpTableData = async () => {
		const res = await listEmp(queryForm);
		//console.log(res);
		// 对数组元素进行重新赋值 以实现响应式
    tabledData.value = res.data.data.records;
    total.value = res.data.data.total;
  };

	/**
   *
   */
	const handleSizeChange = (pageSize) => {
    console.log("handleSizeChange");
    queryForm.pageNum = 1;
	  queryForm.pageSize = pageSize;
    initEmpTableData();
  };

	/**
   * 修改当前页码
   */
	const handleCurrentChange = (pageNum) => {
    console.log("handleCurrentChange");
    queryForm.pageNum = pageNum;
    initEmpTableData();
  };

	const doSearch = () => {
		initEmpTableData();
	};

	// 对话框
  const dialog = reactive({
    show: false,
    title: ''
  });

  const addEmp = () => {
    dialog.show = true;
    dialog.title = '新建员工信息'
  };

  const editEmp = () => {
    dialog.show = true;
    dialog.title = '编辑员工信息'
  };


  // 添加, 更新表单
  const empForm = reactive({
    empno: '',
    ename: '',
    job: '',
    mgr: '',
    hiredate: '',
    sal: '',
    comm: '',
    deptno: '',
  });

  /**
   *  提交表单
   */
  const doSubmit = async () => {
    const res = await saveEmp(empForm);
    if (res.data.code === 200) {
      dialog.show = false;
      await initEmpTableData();
    }
  };


  /**
   * 关闭对话框
   */
  const handleClose = () => {
	  dialog.show = false;
  };

  /**
   * 展示员工列表
   */
  initEmpTableData();

</script>

<style scoped>
  .header {
    padding-bottom: 16px;
    box-sizing: border-box;
  }
</style>
